<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2022 APThink David唐 all rights reserved.
 * 版权所有，侵权必究！
 *
-->
<template>
  <el-row :gutter="12">
    <el-col :span="10">
      <el-form-item :label="$t('label.department')">
        <el-tree-select
          v-model="query.departments"
          :check-strictly="true"
          :data="departmentOptions"
          :placeholder="$t('label.departmentTip')"
          style="width: 100%"
          multiple
          show-checkbox
        />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item :label="$t('label.endtime')">
        <el-date-picker
          v-model="query.endtime"
          type="datetime"
          :placeholder="$t('label.endtime')"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" @click="onFilterClick" icon="Search">{{
        $t("button.filter")
      }}</el-button>
      <el-tooltip :content="$t('button.clearTip')" placement="top">
        <el-button type="success" @click="onClearClick" icon="Operation">{{
          $t("button.clear")
        }}</el-button>
      </el-tooltip>
    </el-col>
  </el-row>
  <el-table
    :data="datas"
    stripe
    style="width: 100%"
    :empty-text="$t('label.emptydata')"
  >
    <template v-for="f in fields">
      <el-table-column
        v-if="f.key == 'department'"
        :label="$t('label.' + f.key)"
        :key="f.key + '_menus'"
        :width="f.minwidth"
      >
        <template #default="scope">
          {{ department.getFullName(scope.row.departmentuid) }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'sessionstate'"
        :label="$t('label.' + f.key)"
        :key="f.key + '_sessionstate'"
        :width="f.minwidth"
      >
        <template #default="scope">
          {{ $t("sessionstate." + scope.row.sessionstate) }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'operator'"
        :key="f.key + '_operator'"
        :width="f.minwidth"
      >
        <template #default="scope">
          <el-tooltip :content="$t('label.forceexitTip')" placement="top">
            <el-button
              type="danger"
              @click="onForceExitClick(scope.row)"
              icon="Delete"
              size="small"
            />
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :prop="f.key"
        :label="$t('label.' + f.key)"
        :key="f.key"
        :width="f.minwidth"
      />
    </template>
  </el-table>
</template>
<script>
import { all, querySession, clearSession, exitSession } from "@/api";
import { confirm, toast, cache, getToken } from "@/utils";
import log from "loglevel";

export default {
  name: "Role",
  data() {
    return {
      fields: [],
      allFields: [],
      datas: [],
      department: null,
      departmentOptions: [],
      current: {},
      currentRow: {},
      query: {},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.department = cache.getTableTree("department")
    this.departmentOptions = this.department.nodeOptions
    const apis = [{ type: "field", data: ["BrowseSession"] }];
    all(apis).then((res) => {
      this.allFields = res.get("allfields").get("BrowseSession");
      this.fields = res.get("userfields").get("BrowseSession");
    });
  },
  methods: {
    refreshColumnField(data) {
      this.fields = data;
    },
    onForceExitClick(row) {
      log.debug("=>force exit", row.sessionid);
      confirm(
        this.$t("label.forceexitTip") +
          ": " +
          row.sessionid +
          " (" +
          row.account +
          ")"
      ).then(() => {
        exitSession(row.sessionid).then(() => {
          let se = this.datas.find((u) => {
            return u.sessionid == row.sessionid;
          });
          if (se) {
            se.sessionstate = 5;
          }
          toast(this.$t('message.forceexitok'));
        });
      });
    },
    onFilterClick() {
      querySession(this.query).then((d) => {
        let t = getToken();
        let i = d.findIndex(x=>{
          return x.sessionid==t;
        })
        if (i>=0) {
          d.splice(i,1)
        }
        this.datas = d;
      });
    },
    onClearClick() {
      clearSession().then(() => {
        toast(this.$t("message.clearok"));
        this.onFilterClick();
      });
    },
  },
};
</script>
